import React from "react";
// 引入styled-components用于在js文件里面写css
import styled from "styled-components";

// .后面写标签名
// 返回一个组件
const Title = styled.div`
  color: blue;
  font-size: 40px;
`;

// 属性值也可以写成函数
// 可以通过写函数使用自定义属性
// 也可以写css的嵌套
const Title2 = styled.div`
  color: green;
  font-style: italic;
  font-size: ${(props) => props.size + "px"};
  .span {
    color: red;
  }
`;

const App = () => {
  return (
    <>
      <h2>cssInJs添加样式</h2>
      <Title>hello react!!</Title>
      <Title2 size="20">hello react2!!</Title2>
      <Title2 size="30">
        hello react3!!
        <span className="span">123</span>
      </Title2>
    </>
  );
};

export default App;
